<template>
  <div v-if="isShow" :class="'m-alert '+ myClass" ref="alert">
    <h3>
      <slot name="title" title="子组件的title"></slot>
    </h3>
    <slot></slot>
    <button @click="$emit('update:isShow',false)">关闭</button>
  </div>
</template>

<script>
export default {
  name: "myAlert",
  props: ['isShow', 'myClass'],
  mounted() {
    // 和$on类似，$once只触发一次就解除了绑定；
    // $off的参数如果是有第一个事件名称，则解除此事件；如果还有第二个参数函数，则只解除此事件的这个方法，需要注意的是有时注册多次，解除一次后还有对应行为。
    this.$bus.$on('close-alert',()=>{
      this.$emit('update:isShow',false)
    })
  },
  data(){
    return{
      isGray:true
    }
  },
  methods:{
    setGray(){
      this.$refs.alert.style.background = '#e6e6e6'
    }
  }
}
</script>

<style scoped>
.m-alert {
  position: relative;
  padding: 1rem;
  background: #e6ffcf;
  border: 1px solid #ddd;
}

.m-alert.warn {
  background: bisque;
}
</style>